<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户登录</title>
    <link rel="stylesheet" href="layui\css\layui.css">
    <script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
</head>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="margin:auto">用户登录</legend>
</fieldset>

<body>
    <div style="margin-left: 560px;">
        <form class="layui-form" action="" >
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入用户名"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" lay-verify="pass" placeholder="请输入密码"
                        autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="button" id="showpwd" class="layui-btn">显示密码</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="loginbtn">登录</button>
                    <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
                    <button type="button" id="fgtpsw" class="layui-btn layui-btn-primary">忘记密码</button>
                    <button type="button" id="nologinbtn" class="layui-btn layui-btn-normal"
                        lay-filter="nologinbtn">游客登录</button>
                    <button type="button" id="regbtn" class="layui-btn layui-btn-primary"
                        lay-filter="nologinbtn">注册</button>

                </div>
            </div>

        </form>

    </div>


    <script src="layui\layui.all.js"></script>
    <script>
        (function ($) {
            $.fn.extend({
                capsLockTip: function () {
                    return this.each(function () {
                        //创建对象实例并保存。
                        //获取实例对象：var api = $("#txtPWD").data("txtPWD");
                        var ins = new $.CapsLockTip($(this));
                        $(this).data(this.id, ins);
                    });
                }
            });


            //创建一个实例。
            //___target jq目标对象。
            //___divTipID   显示提示文本的div。
            $.CapsLockTip = function (___target) {
                //设置当前实例的配置参数。
                this.target = ___target;
                var _this = this;

                $(document).ready(function () {
                    _this.target.bind("keypress", function (_event) {
                        var e = _event || window.event;
                        var kc = e.keyCode || e.which;
                        var isShift = e.shiftKey || (kc == 16) || false;
                        $.fn.capsLockTip.capsLockActived = false;
                        if ((kc >= 65 && kc <= 90 && !isShift) || (kc >= 97 && kc <= 122 &&
                            isShift))
                            $.fn.capsLockTip.capsLockActived = true;
                        _this.showTips($.fn.capsLockTip.capsLockActived);
                    });

                    _this.target.bind("keydown", function (_event) {
                        var e = _event || window.event;
                        var kc = e.keyCode || e.which;
                        if (kc == 20 && null != $.fn.capsLockTip.capsLockActived) {
                            $.fn.capsLockTip.capsLockActived = !$.fn.capsLockTip
                                .capsLockActived;
                            _this.showTips($.fn.capsLockTip.capsLockActived);
                        }
                    });

                    _this.target.bind("focus", function (_event) {
                        if (null != $.fn.capsLockTip.capsLockActived)
                            _this.showTips($.fn.capsLockTip.capsLockActived);
                    });

                    _this.target.bind("blur", function (_event) {
                        _this.showTips(false);
                    });
                });

                //创建显示大写锁定的div。
                this.createTooltip = function () {
                    if (null != $.fn.capsLockTip.divTip)
                        return $.fn.capsLockTip.divTip;

                    $("body").append(
                        "<div id='divTip__985124855558842555' style='width:100px; height:15px; padding-top:3px; display:none; position:absolute; z-index:9999999999999; text-align:center; background-color:#FDF6AA; color:Red; font-size:12px; border:solid 1px #DBC492; border-bottom-color:#B49366; border-right-color:#B49366;'>大写锁定已打开</div>"
                    );
                    $.fn.capsLockTip.divTip = $("#divTip__985124855558842555");

                    return $.fn.capsLockTip.divTip;
                };

                //显示或隐藏大写锁定提示。
                this.showTips = function (display) {
                    var divTip = _this.createTooltip();
                    if (display) {
                        var offset = _this.target.offset();
                        divTip.css("left", offset.left + "px");
                        divTip.css("top", offset.top + _this.target[0].offsetHeight + 3 + "px");
                        divTip.show();
                    } else {
                        divTip.hide();
                    }
                };

                //jq控件公用静态对象。

                //提示框。
                $.fn.capsLockTip.divTip = null;
                //大写锁定键状态
                $.fn.capsLockTip.capsLockActived = null;
            };
        })(jQuery);

        $(function () {
            $("#showpwd").mousedown(function () {
                $("#password").get(0).setAttribute('type', 'text');
            })
            $("#showpwd").mouseup(function () {
                $("#password").get(0).setAttribute('type', 'password');
            })
            $("#password").capsLockTip()
        });

        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //给忘记密码按钮绑定事件
            $("#fgtpsw").click(function () {
                window.location.href = 'fgtpassword1.html';
            });

            //给游客登陆按钮绑定事件
            $("#nologinbtn").click(function () {
                $.post("/bbs/logout", null, function (data) {

                }, "text");
                window.location.href = 'main.html';
            });

            $("#regbtn").click(function(){
                window.location.href='register.html';
            });

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 6) {
                        return '不小于六个字符';
                    }
                },
                pass: [
                    /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                ],
            });

            //监听提交
            form.on('submit(loginbtn)', function (data) {

                $.post("/bbs/login", //修改ajax post的url与属性名称
                    "username=" + data.field.username + "&password=" + data.field.password,

                    function (data) {
                        if (data == "true") {
                            layer.msg('登录成功', {
                                time: 1000

                            });
                            setTimeout("window.location.href = '/bbs/main.html'", 1000);
                        } else {
                            layer.msg("用户名或密码错误", {
                                time: 1000
                            });
                        }
                    }, "text");
                return false;
            });




        });
    </script>
</body>

</html>